<template>
	<view>

		<view style="width: 700rpx;margin:20rpx auto;">
			<u-swiper name="cover" :list="banner" height="300"></u-swiper>
		</view>
		<view v-if="!vip" class="u-flex u-row-between" style="width: 700rpx;margin:20rpx auto 20rpx auto;">
			<view class="class_block" @click="$Go('/pages/free/index')">
				<view class="u-font-weight u-font-32">
					免费题库
				</view>
				<view style="margin-top: 100rpx;">{{info.freeQuestion}}</view>
				<image src="@/static/car_1.png"></image>
			</view>
			<view class="class_block" @click="buy">
				<view class="u-font-weight u-font-32">
					VIP题库
				</view>
				<view style="margin-top: 10rpx;font-weight: bold;color: #007AFF;">600精选题</view>
				<view style="font-size: 22rpx;color: #FA3534;margin-top: 5rpx;">技巧</view>
				<view style="font-size: 22rpx;color: #FA3534;margin-top: 5rpx;">语音</view>
				<view style="font-size: 22rpx;color: #FA3534;margin-top: 5rpx;">视频讲解</view>
				<image src="@/static/car_2.png"></image>
			</view>
		</view>

		<view v-if="vip" class="u-flex u-row-between" style="width: 700rpx;margin:20rpx auto 20rpx auto;">
			<view class="class_block" style="width: 700rpx;" @click="$Go('/pages/vipPage/index')">
				<view class="  u-flex u-row-between">
					<view class="u-font-weight " style="font-size: 50rpx;">VIP题库</view>
					<view class="" style="color: #2979FF;">{{info.vipQuestion}}道题</view>
				</view>
				<view class="u-margin-top-60">精选题</view>
				<image src="@/static/car_2.png"></image>
			</view>
		</view>

		<view style="background: #F7F8FC;width: 700rpx;margin: auto;border-radius: 10rpx;">
			<u-notice-bar :list="noticeList" type="info" mode="vertical"></u-notice-bar>
		</view>

		<view @click="play" class=" "
			style="width: 700rpx;margin:20rpx auto;border-radius: 10rpx;padding:15rpx 20rpx;background: #f1f1f1;border-radius: 10rpx;">
			<view class="u-flex">
				<u-icon size="50" name='play-circle-fill'></u-icon>
				<text class="u-margin-left-20 u-font-weight">企业宣传</text>
			</view>
			<video :src="video" style="width: 100%;margin-top: 20rpx;"></video>
		</view>

		<!-- <eload :play='true'></eload> -->

		<w-vip ref='vip'></w-vip>

		<!-- <video id="myvideo" :src="video"  @fullscreenchange="fullscreenchange" style="position: absolute;top: -100%;"></video> -->
	</view>
</template>

<script>
	import eload from '@/components/v-loading2.vue'
	export default {
		components: {
			eload
		},
		data() {
			return {
				videoContext: '',
				video: '',
				banner: [],
				noticeList: [],
				info: {},
				show: false,
				vip: 0
			}
		},
		async onLoad() {
			this.getBanner()
			this.getNotice()
			await this.play()
		},
		onShow() {
			this.userInfo()
			this.question()
		},
		methods: {
			fullscreenchange(e) {

				if (!e.detail.fullScreen) {
					this.video = ''
					this.videoContext.stop()
				}
			},
			async play() {
				let config = await this.getconfig();
				this.video = config.tgVideo;
				// this.videoContext = uni.createVideoContext('myvideo',this);
				// this.videoContext.requestFullScreen();
			},
			question() {
				this.$u.post('/user/questionStatistics', {}).then(res => {
					this.info = res;
				}).catch(err => {

				})
			},
			userInfo() {
				return new Promise((resolve, reject) => {
					this.$u.api.userInfo().then(res => {
						this.vip = res.vipId;
						resolve(res)
					})
				})
			},

			getconfig() {
				return new Promise((resolve, reject) => {
					this.$u.post('/index/getConfig', {}).then(res => {
						resolve(res)
					}).catch(err => {})
				})
			},


			async buy() {
				let userInfo = await this.userInfo();
				if (!userInfo.vipId) {
					this.$refs.vip.VipShow = true;
				}
			},
			getBanner() {
				this.$u.post('/index/banner', {}).then(res => {
					this.banner = res;
				}).catch(err => {

				})
			},
			getNotice() {
				this.$u.post('/index/notice', {}).then(res => {
					var arr = [];
					res.forEach(item => {
						arr.push(item.content)
					});
					this.noticeList = arr;
				}).catch(err => {

				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.class_block {
		width: 334rpx;
		height: 240rpx;
		background: #F7F8FC;
		border-radius: 10rpx;
		position: relative;
		padding: 20rpx;

		image {
			width: 107rpx;
			height: 80rpx;
			position: absolute;
			right: 50rpx;
			bottom: 30rpx;
		}
	}
</style>
